/*
* @Author: 董洌淇
* @Date: 2020年10月20日14:20:57
* @Last Modified by: 董洌淇
* @Last Modified time: 2020年10月20日14:21:06
* @Description: 地图首页
*/
<template>
	<view class="home-page" :style="{'height': allHeight}">
		<amap ref="map" :center="centerData" :markersData="markersData" :zoom="14" :regionalBoundary="false" @clickMarkertap='clickMarkertap' @tapClick='tapClick'></amap>
	</view>
</template>

<script>
	import amap from '@/components/map/amap'
	import { getMarker, shadowDevice } from '@/api/mapApi'
	import { logout } from '@/api/user'
	import { mapMutations } from 'vuex'
	export default {
		name: 'homePage',
		components: { amap },
		data () {
			return {
				thisValue: '',
				thisDataId:'116',
				allHeight: 0, // 整体窗口高度
				centerData: { // 进入地图展示的中心点位
					latitude: 30.613732,
					longitude: 103.7100
				},
				clickShow:false,
				markersData: [] // 获取的marker数据
			}
		},
		onLoad() {
			const subNVue = uni.getSubNVueById('mapButton') // 通过 id 获取 nvue 子窗体
			subNVue.show() // nvue 窗口显示
			this.getMarkerFun(['0', '1', '2', '3']) // 首次进入获取地图maker
			uni.$on('goMsg', () => { // 前往消息页面
				this.goMsgUrlFun()
			})
			uni.$on('mapCenter', (data) => { // 点击地图回到初始地点
				this.$refs.map.goCenter()
			})
			uni.$on('deviceType', (data) => { // 点击设备筛选调用
				this.getMarkerFun(data) // 获取地图maker
			})
			uni.$on('logout', () => { // 退出登录
				this.logoutFun()
			})
			uni.$on('goLink', (data) => { // 跳转页面
				this.jumpPage(data)
			})
		},
		onUnload () { // 销毁$on方法
			uni.$off('goMsg')
			uni.$off('mapCenter')
			uni.$off('deviceType')
			uni.$off('logout')
			uni.$off('goLink')
		},
		mounted () {
			this.init()
		},
		methods: {
			...mapMutations(['USER_LOGOUT']),
			//点击地图事件
			tapClick () {
				this.clickShow = false
				uni.$emit('click-show', {
					clickShow: this.clickShow
				});
			},
			//地图点位点击事件
			clickMarkertap(data){
				this.clickShow = true
				let dataId = JSON.parse(data.detail.markerId)
				 uni.$emit('page-popup', {  
					dataId:  data.detail.markerId,
					clickShow: this.clickShow
				 });
			},
			// 跳转页面
			jumpPage (data) {
				if (data.type === 'realTimeData') { // 实时数据
					uni.navigateTo({
						url: "../dataList/realTimeData"
					})
				} else if (data.type === 'historicalData') { // 历史数据
					uni.navigateTo({
						url: "../dataList/historicalData"
					})
				} else if (data.type === 'ranking') { // 排名
					uni.navigateTo({
						url: "../dataList/ranking"
					})
				}
			},
			// 进入页面初始化页面高度
			init () {
				const _THIS = this
				uni.getSystemInfo({
					success(res) {
						_THIS.allHeight = (res.screenHeight * 2) + 66 + 'upx'
					}
				})
			},
			// 获取地图marker
			getMarkerFun (data) {
				getMarker(data).then(res => {
					// console.log(res)
					if (res.data.code === 0) {
						let _temp = res.data.data
						let _markerArr = []
						// console.log(this.thisValue,'thisValue')
						_temp.map((v) => { // 数据结构拼接
							let address = v.deviceLocation.replace(/[^\x00-\xff]/g,"$&\x01").replace(/.{20}\x01?/g,"$&\n").replace(/\x01/g,"")
							let _content = '名称:' + v.deviceName + '\n' + '设备分类:' + (v.deviceTypeId === 1? 'PID': 'FID') + '\n' + '所在位置:' + address
							_markerArr.push({
								id: v.id,
								longitude: v.lat,
								latitude: v.lnt,
								title: v.deviceName,
								iconPath: this.imageType(v.deviceTypeId, v.eventType),
								// iconPath: v.deviceTypeId === 1 ? '/static/images/icon-PID.png' : '/static/images/icon-FID.png',
								width: '80upx',
								height: '80upx',
								callout: {
									color: '#34495E',
									// fontSize: '14upx',
									textAlign: 'left',
									bgColor: '#ffffff',
									padding: '30upx',
									content: _content
								},
								label: {
									content :v.deviceName,
									// color:'red',
									// fontSize:'15upx'
								}
							})
						})
						setTimeout(() => {
							this.markersData = _markerArr // 拼接完成后一次性传值给map组件
						}, 200)
					} else if(res.data.code === 401) { // 判断超过30天免登陆期，token失效自动跳转至登录页面
						this.USER_LOGOUT() // 清空储存的用户信息、token
						uni.navigateTo({
							url: '../index/index'
						})
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						})
					}
				}).catch(err => {
					uni.showToast({
						title: '服务器错误，请稍后尝试!',
						icon: 'none',
						duration: 2000
					})
				})
			},
			//图片替换
			imageType (deviceTypeId, eventType) {
			  if (deviceTypeId === 1 && eventType === 0) { // PID设备类型正常
				return '/static/images/PID-0.png'
			  } else if (deviceTypeId === 1 && eventType === 1) {
				return '/static/images/PID-1.png'
			  } else if (deviceTypeId === 1 && eventType === 2) {
				return '/static/images/PID-2.png'
			  } else if (deviceTypeId === 1 && eventType === 3) {
				return '/static/images/PID-3.png'
			  } else if (deviceTypeId === 1 && eventType === 4) {
				return '/static/images/PID-4.png'
			  } else if (deviceTypeId === 2 && eventType === 0) { // FID设备类型正常
				return '/static/images/FID-0.png'
			  } else if (deviceTypeId === 2 && eventType === 1) {
				return '/static/images/FID-1.png'
			  } else if (deviceTypeId === 2 && eventType === 2) {
				return '/static/images/FID-2.png'
			  } else if (deviceTypeId === 2 && eventType === 3) {
				return '/static/images/FID-3.png'
			  } else if (deviceTypeId === 2 && eventType === 4) {
				return '/static/images/FID-4.png'
			  } else if (deviceTypeId === 3 && eventType === 0) {
				  return '/static/images/pm-0.png'
			  } else if (deviceTypeId === 3 && eventType === 1) {
				  return '/static/images/pm-1.png'
			  } else if (deviceTypeId === 3 && eventType === 2) {
				  return '/static/images/pm-2.png'
			  } else if (deviceTypeId === 3 && eventType === 3) {
				  return '/static/images/pm-3.png'
			  } else if (deviceTypeId === 3 && eventType === 4) {
				  return '/static/images/pm-4.png'
			  }
			},
			// 跳转到消息列表页面
			goMsgUrlFun () {
				uni.navigateTo({
				    url:"../message/index"
				})
			},
			// 退出登录
			logoutFun () {
				logout().then(res => {
					if (res.data.code === 0) {
						this.USER_LOGOUT()
						uni.showToast({
							title: '退出成功!',
							icon: 'none',
							duration: 2000
						})
						uni.navigateTo({
							url:"../index/index"
						})
					} else {
						uni.showToast({
							title: res.errMsg,
							icon: 'none',
							duration: 2000
						})
					}
				}).catch(err => {
					uni.showToast({
						title: '服务器错误，请稍后尝试!',
						icon: 'none',
						duration: 2000
					})
				})
			}
		}, 
		// 监听物理返回
		onBackPress(data) {
			// #ifdef APP-PLUS  
				plus.runtime.quit() // 退出应用
			// #endif
		}
	}
</script>

<style lang="scss" scoped>
	.home-page {
		width: 100%;
	}
</style>
